<template>
  <div class="">
        <el-tabs type="card">
            <el-tab-pane label="公司资质">
                <ul class="list cp">
                    <li v-for="(item,j) in zzList" :key="j+''">
                        <div class="pr">
                            <img :src="httpImgUrl+item.photo">
                            <div class="del" @click="delZz(j)">删除</div>
                        </div>
                        <el-input class="mb20" v-model="item.name" placeholder="请输入中文公司资质名称"></el-input>
                        <el-input v-model="item.nameEn" placeholder="请输入英文公司资质名称"></el-input>
                    </li>
                    <li @click="uploadClick('zzList')">
                        <div class="pr">
                            <!-- <input type="file" class="inpfile" accept="image/*" @change="beforeAvatarUpload">
                            <div class="avatar-uploader">:before-upload="beforeAvatarUpload"
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </div> -->
                            <el-upload class="avatar-uploader" :action="httpApi+'uploadfile/uploadFile'"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            accept="image/*">
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                        <div class="tip">请上传560*780的图片</div>
                        <div class="h40"></div>
                    </li>
                </ul>
                <el-button type="primary w200 mrauto mt20" round @click="uploadPic(1)">上传</el-button>
            </el-tab-pane>
            <el-tab-pane label="公司奖牌">
                <ul class="list">
                    <li v-for="(item,j) in jpList" :key="j+''">
                        <div class="pr">
                            <img :src="httpImgUrl+item.photo">
                            <div class="del" @click="delJp(j)">删除</div>
                        </div>
                        <el-input class="mb20" v-model="item.name" placeholder="请输入中文公司奖牌名称"></el-input>
                        <el-input v-model="item.nameEn" placeholder="请输入英文公司奖牌名称"></el-input>
                    </li>
                    <li @click="uploadClick('jpList')">
                        <div class="pr">
                            <el-upload class="avatar-uploader" :action="httpApi+'uploadfile/uploadFile'"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess">
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                        <div class="tip">请上传700*480的图片</div>
                    </li>
                </ul>
                <el-button type="primary w200 mrauto mt20" round @click="uploadPic(2)">上传</el-button>
            </el-tab-pane>
            <el-tab-pane label="产品资质">
                <ul class="list cp">
                    <li v-for="(item,j) in cpList" :key="j+''">
                        <div class="pr">
                            <img :src="httpImgUrl+item.photo">
                            <div class="del" @click="delCp(j)">删除</div>
                        </div>
                        <el-input class="mb20" v-model="item.name" placeholder="请输入中文产品资质名称"></el-input>
                        <el-input v-model="item.nameEn" placeholder="请输入英文产品资质名称"></el-input>
                        
                    </li>
                    <li @click="uploadClick('cpList')">
                        <div class="pr">
                            <el-upload class="avatar-uploader" :action="httpApi+'uploadfile/uploadFile'"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess">
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                        <div class="tip">请上传560*780的图片</div>
                    </li>
                </ul>
                <el-button type="primary w200 mrauto mt20" round @click="uploadPic(3)">上传</el-button>
            </el-tab-pane>
        </el-tabs>
        <div  class="optimg">
            <img :src="imgUrl"  ref='img'>
        </div>
        
  </div>
</template>

<script>
// import ueditor from './ue.vue' //调用编辑器
export default {
  name: 'HelloWorld',
  data () {
    return {
      jpList:[],
      zzList:[],
      cpList:[],
      uploadList:[],
      model:'zzList',   
      dialogTableVisible:false,
      photo:'',
      name:'',
      nameEn:'',
      imgUrl:''
    //   befor
    }
  },
  methods:{
    //   删除公司奖品
      delJp(index){
          this.del(this.jpList[index].id,index,2);
      },
      // 删除产品资质
      delCp(index){
          this.del(this.cpList[index].id,index,3);
      },
      // 删除公司资质
      delZz(index){
          this.del(this.zzList[index].id,index,1);
          
      },
      uploadClick(value){
          this.model=value;
          console.log(this.model)
      },
      beforeAvatarUpload(ev){
        var that=this;
        var file=ev.target.files[0];
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
        return false;
        }
        var reader = new FileReader();
        reader.onload = function(evt) {
            console.log(evt)
            var img=new Image();
            img.src=evt.target.result;
            img.onload=function (evt) {
                console.log(evt.path[0].width)
                console.log(evt.path[0].height)
                if(evt.path[0].width<=100&&evt.path[0].height<=100){
                    that.uploadImg(file);
                }else{
                    that.$message.error('上传图片尺寸不正确!');
                }
            }
        }
        reader.readAsDataURL(file);
        // const isJPG = file.type === 'image/jpeg';
        // const isLt2M = file.size / 1024 / 1024 < 2;
        // if (!isJPG) {
        //   this.$message.error('上传头像图片只能是 JPG 格式!');
        // }
        // if (!isLt2M) {
        //   this.$message.error('上传头像图片大小不能超过 2MB!');
        // }
        // return isJPG && isLt2M;
      },
      uploadImg(file){
        var param=new FormData();
        param.append('file',file);
        this.$http.post(this.$store.state.httpApi + 'uploadfile/uploadFile',param).then(response =>{
            if(response.status == 200){
              if(response.data.success){
                  var type1;
                   if(this.model == 'zzList'){
                            type1 = 1;
                    }
                    if(this.model == 'jpList'){
                            type1 = 2;
                    }
                    if(this.model == 'cpList'){
                            type1 = 3;
                    }
                    this[this.model].push({name:'',photo:response.data.data[0],id:'',type:type1,nameEn:""});
                    this.photo = response.data.data[0];
              }				    
            }else{
              console.log('接口返回失败!',response);
            }
          },response => {
            
            console.log('请求失败',response)
          })
      },
      handleAvatarSuccess(file){
          var type1;
          if(this.model == 'zzList'){
                type1 = 1;
          }
          if(this.model == 'jpList'){
                type1 = 2;
          }
          if(this.model == 'cpList'){
                type1 = 3;
          }
          this[this.model].push({name:'',photo:file.data[0],id:'',type:type1,nameEn:""})
          this.photo = file.data[0];
      },
      del(id,index,type){
      this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var httpApi=this.$store.state.httpApi;
          this.$http.post(this.$store.state.httpApi + 'enterpriseQualification/del?id='+id).then(response =>{
            if(response.status == 200){
              this.$message.success('删除成功');
              if(type == 1){
                this.zzList.splice(index,1);	
              }
              if(type == 2){
                this.jpList.splice(index,1);	
              }
              if(type == 3){
                this.cpList.splice(index,1);	
              }
              				    
            }else{
              console.log('接口返回失败!',response);
            }
          },response => {
            
            console.log('请求失败',response)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      uploadPic(thisType){
             if(thisType == 1){
                this.uploadList = this.zzList;
              }
              if(thisType == 2){
                this.uploadList = this.jpList;
              }
              if(thisType == 3){
               this.uploadList = this.cpList;
              }
              if(this.uploadList.length<=0){
                if(thisType == 1){
                    this.$message.error('请添加公司资质');
                }
                if(thisType == 2){
                    this.$message.error('请添加公司奖牌');
                }
                if(thisType == 3){
                    this.$message.error('请添加产品资质');
                }
              }else{
                var flag=true;
                this.uploadList.forEach(function (ele) {
                    if(ele.name==''||ele.nameEn==''){
                        flag=false
                    }
                })
                if(flag){
                        var param={list:JSON.stringify(this.uploadList)};
                        this.$http.post(this.$store.state.httpApi + ('enterpriseQualification/save'),param).then(response =>{
                            if(response.status == 200){
                                if(response.data.success){
                                    this.$message.success('上传成功');
                                    this.getRows();
                                }else{
                                    this.$message.error(response.data.error);
                                }
                            }else{
                                console.log('接口返回失败!',response);
                            }
                            },response => {
                                console.log('请求失败',response)
                        })
                }else{
                        if(thisType == 1){
                            this.$message.error('您还有公司资质名称没有输入');
                        }
                        if(thisType == 2){
                            this.$message.error('您还有公司奖牌名称没有输入');
                        }
                        if(thisType == 3){
                            this.$message.error('您还有产品资质名称没有输入');
                        }
                }
              }
              
      },
       getRows(){
          this.$http.get(this.$store.state.httpApi + 'enterpriseQualification/all').then(response =>{
          if(response.status == 200){  
              var _this=this;
              _this.zzList=[];
              _this.jpList=[];
              _this.cpList=[];
              response.data.data.forEach(function (ele) {
                  if(ele.type==1){
                      if(!ele.nameEn){
                          ele.nameEn='';
                      }
                      _this.zzList.push(ele);
                  }
                  if(ele.type==2){
                      _this.jpList.push(ele);
                  }
                  if(ele.type==3){
                      _this.cpList.push(ele);
                  }
              })         
        //   this.totalCount = response.data.data.page.totalPage*10;
          }else{
            console.log('接口返回失败!',response);
          }
          },response => {
            console.log('请求失败',response)
          })
       }
  },
  created(){
      this.getRows();
  },
  computed: {
    httpApi(){
        return this.$store.state.httpApi
    },
    httpImgUrl(){
        return this.$store.state.httpImgUrl
    },
  },
  components: {
//使用编辑器
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    .tip{
        color:red;
        font-size:14px;
        text-align:center;
    }
    .optimg{
        position:absolute;
        left:0;
        top:0;
        opacity:0
    }
    .list{
        font-size: 0;
        margin-right: -24px;
    }
    .list li{
        width:290px;
        // height: 200px;
        margin-right: 24px;
        display: inline-block;
        margin-bottom: 50px;
        position: relative;
        vertical-align: top;
    }
    .inpfile{
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        opacity:0
    }
    .list .pr{
        width:100%;
        height: 200px;
        margin-bottom: 23px;
        position: relative;
        line-height:200px;
    }
    .list .pr img{
        width:100%;
        height: 100%;
    }
    .list .avatar-uploader{
        width:100%;
        height: 100%;
        box-sizing: border-box;
        border:1px solid #D9D9D9;
        font-size: 54px;
        text-align: center;
        // line-height: 200px;
        color: #D2D2D2;
    }
    .list p{
        font-size: 20px;
        text-align: center;
    }
    .del{
        width: 100%;
        position: absolute;
        height:42px; 
        background:rgba(255,0,0,0.6);
        color: #fff;
        text-align: center;
        bottom: 0;
        font-size: 14px;
        display: none;
        line-height: 42px;
        cursor: pointer;
    }
    .list li .pr:hover .del{
        display: block;
    }
    .list.cp li{
        width:206px;
    }
    .list.cp li .pr{
        height: 288px;
        line-height:288px;
    }
    .detail img{
        width:290px;
        height: 200px;
        display: block;
        margin: 0 auto 20px;
    }
    .detail{
        text-align: center;
    }
    .detail p{
        margin-bottom: 50px;
    }
</style>
